<template>
  itable
  <div>
    <table id="table" class="table">
      <thead>
      <tr>
        <th colspan="4" class="text-center">ID</th>
        <th colspan="4" class="text-center">name</th>
        <th colspan="4" class="text-center">age</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="b in bb" :key="b.id">
        <td colspan="4" class="text-center">{{ b.id }}</td>
        <td colspan="4" class="text-center">{{ b.name }}</td>
        <td colspan="4" class="text-center">{{ b.age }}</td>
      </tr>
      </tbody>
    </table>
  </div>

  <div>
    <el-button type="primary" @click="info">样式按钮</el-button>
    <br>
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名"/>
      <el-table-column prop="age" label="年龄"/>
    </el-table>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import axios from "axios";

const info = () => {
  alert("hi")
}

const tableData = [
  {name: '张三', age: 25},
  {name: '李四', age: 30}
];
axios.defaults.withCredentials = true
const bb = ref([
  {
    "id": 1,
    "name": "tom",
    "age": 23
  },
  {
    "id": 2,
    "name": "Bob",
    "age": 24
  }
])
</script>